<template>
    <div class="container mCom" id="mCom" style="background:#fff">
        <div class="search-box">
        <div class="search">
          <el-form inline>
            <el-form-item label="日志级别：">
                <el-select v-model="paginationlog.loggerLevel" placeholder="请选择">
                  <el-option
                    v-for="item in loggerLevel"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              <!-- <el-input v-model="paginationlog.loggerLevel" placeholder="请输入日志级别"></el-input> -->
            </el-form-item>
            <el-form-item label="模块名称：">
                <el-select v-model="paginationlog.model" placeholder="请选择">
                  <el-option
                    v-for="item in model"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              <!-- <el-input v-model="paginationlog.model" placeholder="请输入模块名称"></el-input> -->
            </el-form-item>
            <el-form-item label="选择日期：">
              <el-date-picker
                v-model="operationTime"
                type="daterange"
                value-format="yyyy-MM-dd hh:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="">
                <el-button size="medium" type="primary" icon="el-icon-search" @click="handleLogSearch">搜索</el-button>
                <el-button size="medium" type="primary" icon="el-icon-refresh-right" @click="resetSearch">重置</el-button>
                <el-button size="medium" type="primary" icon="el-icon-upload el-icon--right" @click="handleLogExport">导出</el-button>
            </el-form-item>
          </el-form>
        </div>
       </div>
       <div style="height: 800px;">
           <el-table
            :header-cell-style="{background:'#F5F5F5'}"
      v-loading="loadingLog"
      :data="DataLogList"
      max-height="600"
      :cell-style="{padding: '10px'}"
      border
    >
      <el-table-column label="序号" align="center" type="index" width="60"/>
      <el-table-column label="日志级别" align="center" prop="loggerLevel" />
      <el-table-column
        label="模块名称"
        align="center"
        prop="model"
      />
      <el-table-column
        label="日志信息"
        align="center"
        prop="operationResult"
      />
      <el-table-column
        label="用户名"
        align="center"
        prop="userName"
      />
      <el-table-column
        label="机器地址"
        align="center"
        prop="ip"
      />
      <el-table-column
        label="时间"
        align="center"
        prop="operationTime"
      >
      <template slot-scope="scope">
          {{parseTimeToDate(scope.row.operationTime)}}
        </template>
      </el-table-column>
    </el-table>
    <div class="pagesize">
      <div id="fy" class="block">
        <el-pagination @size-change="handleSizeLogChange" @current-change="handleCurrentLogChange"
        :current-page="paginationlog.pageNumber" :page-sizes="[10, 20, 30, 50]"
        :page-size="paginationlog.pageSize" layout="total, sizes, prev, pager, next"
        :total="totalLog"></el-pagination>
      </div>
    </div>
       </div>
    </div>
</template>
<script>
import {
  getLogList,
  getLogName,
  getModelName,
  exportLog
} from "../../api/sourceDetail";
const FileDownloader = require("js-file-download");
export default {
  name: "modelMan",
  data() {
    return {
      operationTime: [],
      loggerLevel: [],
      model: [],
      paginationlog: {
        model: "",
        loggerLevel: "",
        startTime: "",
        endTime: "",
        name: "",
        pageSize: 10,
        pageNumber: 1,
        currentPage: 1
      },
      totalLog: 0,
      loadingLog: false,
      DataLogList: [],
      dataType: []
    };
  },
  created() {
    this.GET_tableLogList();
    this.getModelName();
    this.getLogName();
  },
  methods: {
    getModelName() {
      getModelName().then(res => {
        if (res.status == "SUCCESS") {
          this.model = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    getLogName() {
      getLogName().then(res => {
        if (res.status == "SUCCESS") {
          this.loggerLevel = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleSizeLogChange(val) {
      this.paginationlog.pageSize = val;
      this.GET_tableLogList();
    },
    handleCurrentLogChange(val) {
      this.paginationlog.pageNumber = val; //修改当前页
      this.GET_tableLogList();
    },
    //重置
    resetSearch() {
      (this.operationTime = []),
        (this.paginationlog = {
          model: "",
          loggerLevel: "",
          startTime: "",
          endTime: "",
          name: "",
          pageSize: 10,
          pageNumber: 1,
          currentPage: 1
        });
      this.GET_tableLogList();
    },
    // 搜索
    handleLogSearch() {
      this.GET_tableLogList();
    },
    // 导出
    handleLogExport() {
      exportLog(this.paginationlog).then(res => {
        var blob = new Blob([res], {
          type: "application/zip;charset-UTF-8"
        });
        const blobUrl = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.style.display = "none";
        a.href = blobUrl;
        a.download = new Date().getTime() + ".excl";
        a.click();
        URL.revokeObjectURL(blobUrl); // 释放内存
      });
    },
    // 获取表格数据
    GET_tableLogList() {
      this.loading = true;
      this.paginationlog.startTime = this.operationTime
        ? this.operationTime[0]
        : "";
      this.paginationlog.endTime = this.operationTime
        ? this.operationTime[1]
        : "";
      getLogList(this.paginationlog)
        .then(res => {
          this.DataLogList = res.data.content;
          this.loading = false;
          this.totalLog = res.data.totalElements;
        })
        .catch(e => {
          this.loading = false;
        });
    },
    parseTimeToDate: function(timeStep) {
      //将时间戳转成yyyy-mm-dd hh:mm:ss
      if (timeStep == null || timeStep == "" || timeStep == 0) {
        return null;
      }
      var time = new Date(timeStep);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        "-" +
        this.addNum(m) +
        "-" +
        this.addNum(d) +
        " " +
        this.addNum(h) +
        ":" +
        this.addNum(mm) +
        ":" +
        this.addNum(s)
      );
    },
    addNum: function(m) {
      return m < 10 ? "0" + m : m;
    }
  }
};
</script>
<style scoped>
.container .search-box {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}
</style>
